<template>
  <div>
    <div v-if="article.img" class="bg" :style="{ backgroundImage: 'url(' + $cloud + article.img + ')' }">
      <div class="bg_inner"></div>
      <img class="bg_img" :src="$cloud + article.img" alt="">
    </div>
    <div class="article">
      <div class="md_wrap">
        <h1 class="title">{{ article.title }}</h1>
        <div class="info">
          <span class="author"><i class="el-icon-user"></i>hen</span>
          <span class="created-at"><i class="el-icon-time"></i>{{ article.createdAt }}</span>
          <span class="tag"><i class="el-icon-price-tag"></i><span v-for="(v, i) in article.tags" :key="i">{{ v.name
              }}</span></span>
          <!-- <span><i class="el-icon-view"></i>{{article.browse}}</span> -->
        </div>
        <markdown-it-vue class="md-body" :content="md + ''" />
      </div>

      <el-divider class="end_line">end</el-divider>

      <!-- 评论 -->
      <MsgList v-if="list.length" :list="list" tip="暂无评论" @delete="deleteComment" @delReply="deleteReply"
        @reply="replyComment"></MsgList>

      <!-- 评论 -->
      <MsgForm tip="发表评论" @submit="postComment"></MsgForm>

      <!-- 回复 -->
      <el-dialog class="reply_dialog" :visible.sync="dialogReply" width="90%" :show-close="false"
        :modal-append-to-body="false">
        <MsgForm tip="发表回复" @submit="postReply"></MsgForm>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import MsgForm from '@/views/components/MsgForm'
import MsgList from '@/views/components/MsgList'

export default {
  name: 'ArticleDetail',
  components: {
    MsgForm,
    MsgList,
  },
  data() {
    return {
      articleId: Number(this.$route.params.id),
      dialogReply: false, // 回复框
      name: 'hen',
      article: {},
      md: '',
      user: {
        userId: '',
        name: '',
        email: '',
        admin: '',
        content: '',
        replyUserId: '', // 回复用户id
        commentId: '', // 评论id
      },
      replyData: {
        userId: '',
        replyUserId: '',
        commentId: '',
        content: '',
      },
      list: [],
    }
  },
  watch: {
    $route(to, from) {
      this.articleId = Number(this.$route.params.id)
      this.getArticleDetail(this.articleId)
      this.loadComment(this.articleId)
    },
  },
  watch: {
    '$store.state.user': {
      handler(value) {
        if (value.userId) {
          this.getUser()
        } 
      },
      immediate: true,
      deep: true
    }
  },
  computed: {},
  mounted() {
    // 首次加载滚动条回到顶部
    document.body.scrollTop = document.documentElement.scrollTop = 0

    this.getArticleDetail(this.articleId)
    this.loadComment(this.articleId)

    this.getUser()
  },
  methods: {
    // 删除评论
    deleteComment(commentId) {
      this.$api.httpCommentDelete(commentId).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.loadComment(this.articleId)
        }
      })
    },
    // 删除回复
    deleteReply(replyId) {
      this.$api.httpReplyDelete(replyId).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.loadComment(this.articleId)
        }
      })
    },
    // 回复评论
    replyComment(commentId, replyUserId) {
      this.dialogReply = true

      this.replyData.userId = this.user.userId
      this.replyData.replyUserId = replyUserId
      this.replyData.commentId = commentId
    },
    // 发送回复
    postReply(content) {
      this.replyData.content = content
      this.$api.httpReply(this.replyData).then((res) => {
        if (res.code == 200) {
          this.$message.success('回复成功')
          this.loadComment(this.articleId)
          this.dialogReply = false
        }
      })
    },
    // 获取用户信息
    getUser() {
      const user = this.$store.state.user
      for (let key in user) {
        // 获取键名
        this.user[key] = user[key]
      }
    },
    // 加载md
    loadMd(url) {
      this.$api.httpURL(url).then((res) => {
        this.md = res || ''
      })
    },
    // 加载文章评论
    loadComment(articleId) {
      this.$api.httpArticleCommentLoad(articleId).then((res) => {
        if (res.code == 200) {
          this.list = res.data || []
        }
      })
    },
    // 发送评论
    postComment(content) {
      const data = {
        userId: this.$store.state.user.userId,
        articleId: this.articleId,
        content: content,
      }
      this.$api.httpComment(data).then((res) => {
        if (res.code === 200) {
          this.$message.success('评论成功')
          this.loadComment(this.articleId)
        }
      })
    },
    // 获取文章详情
    getArticleDetail(id) {
      this.$api.httpArticlDetail(id).then((res) => {
        if (res.code === 200) {
          this.article = res.data || {}
          this.loadMd(this.$cloud + this.article.md)
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.bg {
  width: 100%;
  height: 420px;
  position: relative;
  background-size: cover;
  background-position: center;

  .bg_inner {
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: saturate(100%) blur(24px);
  }

  .bg_img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 6px;
  }
}

// 取消弹出框间距
.reply_dialog {
  ::v-deep.el-dialog__header {
    padding: 0;
  }

  ::v-deep.el-dialog__body {
    padding: 0;
  }
}

.article {
  width: 1200px;
  margin: 48px auto 0;
  padding-bottom: 80px;

  .end_line {
    margin: 70px 0;
  }

  .title {
    font-size: 42px;
    font-weight: 600;
    color: $light-black;
    line-height: 42px;
    text-align: center;
  }

  .info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 22px 0 48px;

    &>span {
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: $light-gray;
      line-height: 20px;
      margin-right: 40px;

      i {
        padding-right: 8px;
      }

      span {
        margin-right: 16px;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .bg {
    width: 100% !important;
    height: 300px !important;
  }
  .bg_img{
    max-width: 100%;
  }

  .article {
    width: 100%;

    .title {
      text-align: left;
    }

    .info {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}
</style>

